<template>
  <button @click="isShow = true">元素 显示/创建</button>
  <button @click="isShow = false">元素 隐藏/移除</button>
  <!-- 🔔 transition 单元素/组件的过渡  -->
  <transition name="v">
    <div class="box" v-if="isShow">盒子</div>
  </transition>

  <transition name="haha">
    <div class="box" v-if="isShow">盒子2</div>
  </transition>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const isShow = ref(false)
    return { isShow }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: plum;
}

// 元素入场 enter - 3个类名
.v-enter-from {
  opacity: 0;
}
.v-enter-active {
  transition: all 2s;
}
.v-enter-to {
  opacity: 1;
}

// 元素离场  leave - 3个类名
.v-leave-from {
  transform: translateX(0);
  opacity: 1;
}

.v-leave-active {
  transition: all 2s;
}

.v-leave-to {
  transform: translateX(500px);
  opacity: 0;
}

// 元素入场 enter - 3个类名
// v-enter-from 初始状态 （vue2.0 v-enter）
.haha-leave-to,
.haha-enter-from {
  transform: scale(0);
}
.haha-leave-active,
.haha-enter-active {
  transition: all 2s;
}
.haha-leave-from,
.haha-enter-to {
  transform: scale(1);
}
</style>
